<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar title="" left-arrow @click-left="onClickLeft">
      <template #title>
        <div class="search-box" @click="onSearch">
          <van-icon name="search" class="search-icon" />
          <span class="search-placeholder">搜索商品/店铺</span>
        </div>
      </template>
      <template #right>
        <van-icon name="heart-o" style="margin-right: 10px" />
        <van-icon name="shopping-cart-o" />
      </template>
    </van-nav-bar>

    <!-- 菜单栏 -->
    <van-tabs v-model="active" @change="onTabChange">
      <van-tab title="推荐" />
      <van-tab title="秒杀" />
      <van-tab title="月黑风高" />
      <van-tab title="黑色星期五" />
      <van-tab title="京东指数" />
    </van-tabs>

    <!-- 抢购时间栏 -->
    <div class="time-bar">
      <span v-for="(item, index) in currentTimeList" :key="index">
        {{ item.time }} {{ item.text }}
      </span>
    </div>

    <!-- 商品列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group>
        <van-cell
          v-for="(goods, goodsIndex) in currentGoodsList"
          :key="goodsIndex"
          :title="goods.title"
          :label="goods.desc"
          :price="goods.price"
          :thumb="goods.image"
        >
          <template #right-icon>
            <van-button round type="red" @click="handleBuy(goods)"
              >抢</van-button
            >
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, // 当前标签页索引
      loading: false, // 是否正在加载中
      finished: false, // 是否已经加载完毕

      /* 抢购时间列表 */
      timeLists: [
        // 推荐
        [
          { time: "00:55:26", text: "1000场" },
          { time: "12:00", text: "即将开抢" },
          { time: "16:00", text: "即将开抢" },
        ],
        // 秒杀
        [
          { time: "10:22:15", text: "热销中" },
          { time: "14:00", text: "即将开抢" },
          { time: "20:00", text: "即将开抢" },
        ],
        // 月黑风高
        [
          { time: "20:30:45", text: "热销中" },
          { time: "22:00", text: "即将开抢" },
          { time: "23:59", text: "即将开抢" },
        ],
        // 黑色星期五
        [
          { time: "全天", text: "限时特惠" },
          { time: "12:00", text: "爆款返场" },
          { time: "18:00", text: "额外9折" },
        ],
        // 京东指数
        [
          { time: "实时更新", text: "热门榜单" },
          { time: "今日", text: "销量排行" },
          { time: "本周", text: "新品排行" },
        ],
      ],

      /* 商品数据 */
      goodsLists: [
        // 推荐商品
        [
          {
            title: "可口可乐 可乐 6瓶*300ml",
            desc: "最高返8京豆 包邮 7天内保价",
            price: "¥8.79",
            image:
              "https://img14.360buyimg.com/n1/jfs/t1/206772/33/25737/107777/64783d73F90885999/8909090909090909.jpg",
            sales: "已抢45%",
          },
        ],
        // 秒杀商品
        [
          {
            title: "Apple iPhone 14 128GB",
            desc: "限时抢购 最高返1200京豆",
            price: "¥5299",
            image:
              "https://img10.360buyimg.com/n1/jfs/t1/217777/33/25737/110777/64783d73F90885999/8909090909090909.jpg",
            sales: "已抢78%",
          },
          {
            title: "华为 MateBook 14s 2023款",
            desc: "限时抢购 赠蓝牙鼠标",
            price: "¥5699",
            image:
              "https://img12.360buyimg.com/n1/jfs/t1/207772/30/25837/111777/64783d73F90885999/8909090909090909.jpg",
            sales: "已抢65%",
          },
          {
            title: "小米 13 8GB+128GB",
            desc: "限时抢购 赠耳机",
            price: "¥3699",
            image:
              "https://img14.360buyimg.com/n1/jfs/t1/211772/33/25737/112777/64783d73F90885999/8909090909090909.jpg",
            sales: "已抢82%",
          },
        ],
        // 月黑风高商品
        [
          {
            title: "南极人 男士保暖内衣套装",
            desc: "深夜特惠 最高返50京豆",
            price: "¥79.9",
            image:
              "https://img10.360buyimg.com/n1/jfs/t1/207777/12/26737/113777/64783d73F90885999/8909090909090909.jpg",
            sales: "已抢55%",
          },
        ],
        // 黑色星期五商品
        [
          {
            title: "Apple AirPods Pro 2",
            desc: "黑五特惠 最高返500京豆",
            price: "¥1699",
            image:
              "https://img10.360buyimg.com/n1/jfs/t1/217777/12/26737/116777/64783d73F90885999/8909090909090909.jpg",
            sales: "已抢68%",
          },
        ],
        // 京东指数
        [
          {
            title: "京东指数",
            desc: "京东指数",
            price: "¥0.00",
            image:
              "https://img10.360buyimg.com/n1/jfs/t1/207777/12/26737/116777/64783d73F90885999/8909090909090909.jpg",
            sales: "已抢68%",
          },
        ],
      ],

      // 当前显示的时间和商品列表
      currentTimeList: [],
      currentGoodsList: [],
    };
  },
  created() {
    // 初始化当前显示的数据
    this.updateCurrentData();
  },
  methods: {
    // 左侧返回按钮点击事件
    onClickLeft() {
      console.log("点击了左侧返回");
    },
    // 搜索按钮点击事件
    onSearch() {
      console.log("跳转到搜索页");
    },
    // 标签页切换事件
    onTabChange(index) {
      console.log("切换到标签页:", index);
      this.active = index; // 更新当前标签页索引
      this.updateCurrentData(); // 更新当前显示的数据
      this.loading = false; // 重置加载状态
      this.finished = false; // 重置完成状态
      this.currentGoodsList = this.goodsLists[index].slice(); // 创建副本
    },
    // 滚动加载事件
    updateCurrentData() {
      this.currentTimeList = this.timeLists[this.active];
      this.currentGoodsList = this.goodsLists[this.active].slice();
    },
    // 加载更多事件
    onLoad() {
      // 加载下一页数据
      setTimeout(() => {
        const currentList = this.goodsLists[this.active]; // 当前标签页对应的商品列表
        for (let i = 0; i < 3; i++) {
          // 每次加载3个数据
          const randomIndex = Math.floor(Math.random() * currentList.length); // 随机获取一个索引
          this.currentGoodsList.push(currentList[randomIndex]); // 添加数据
        }
        this.loading = false; // 重置加载状态
        if (this.currentGoodsList.length >= 9) {
          // 如果已加载的数据数量达到9个，则认为加载完成
          this.finished = true; // 重置完成状态
        }
      }, 1000); // 1 秒延迟
    },
    // 抢购按钮点击事件
    handleBuy(goods) {
      console.log("点击抢购", goods);
    },
  },
};
</script>

<style scoped>
/*  导航栏样式  */
.van-nav-bar {
  background-color: #e62129;
  color: #fff;
}
/* 搜索框样式  */
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 30px;
  border-radius: 15px;
  padding: 0 10px;
  width: 100%;
}
/* 搜索图标样式 */
.search-icon {
  color: #999;
  margin-right: 5px;
}
/* 搜索提示样式 */
.search-placeholder {
  color: #999;
  font-size: 14px;
}
/* 标签栏样式 */
.van-tabs {
  margin-top: 10px;
}
/*  时间栏样式 */
.time-bar {
  display: flex;
  padding: 10px;
  background-color: #fff;
  overflow-x: auto;
  white-space: nowrap;
}
/* 时间样式 */
.time-bar span {
  margin-right: 15px;
  font-size: 14px;
}
/* 商品栏样式 */
.van-list {
  margin-top: 10px;
}
</style>